<template>
  <div class="container">
    <div class="header">
      <div class="title">视频监控</div>      
    </div>
    <div class="video">
      <video 
        id="myVideo" 
        x-webkit-airplay="allow"
        playsinline="true" 
        webkit-playsinline="true"
        class="video-js vjs-default-skin vjs-big-play-centered"         
        style='width: 100%;height: 100%;'
      >
      </video>
    </div>
    <div class="content">
      <div class="title">视频信息</div>
      <div class="info">
        <div class="item">视频监控定位名称：{{ route.query.name }}</div>
        <!-- <div class="item">摄像头编号：--</div>
        <div class="item">船闸名称：--</div> -->       
        <!-- <div class="item">视频分辨率：--</div> -->
      </div>      
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick } from "vue";
  import { useRouter,useRoute } from "vue-router"; 
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';

  //引入中文插件
  import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
  videojs.addLanguage('zh-CN',VideojsZhcnLanguage);

  const router = useRouter();
  const route = useRoute();

  import { 
    playVideo
  } from "../../utils/apis";

  const playVideoFn = () => {
    playVideo(route.query.id).then((res) => {
      if(res.code === 200 && res.data){
        setTimeout(() => {
          initVideo(res.data.url);          
        },500);
      }
    });
  };

  const isPlay = ref(false);
  const initVideo = (url) => {
    videojs("myVideo",{
      language: 'zh-CN',  //汉化
      autoplay: true, // true,浏览器准备好时开始播放
      muted: false, // 默认情况下将会消除音频
      loop: true, // 导致视频一结束就重新开始
      controls: true, //取消视频中的进度条
      preload: 'metadata', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）      
      fluid: true, // 当true时，将按比例缩放以适应其容器
      sources: [{
        type: 'application/x-mpegURL',
        src: url,  //视频播放地址
      }],
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
      textTrackDisplay: false,
      techOrder: ['html5', 'flash']
    }, () => {  
        const myPlayer = videojs("myVideo");      
       
        setTimeout(() => {         
          myPlayer.play();  
          myPlayer.on("play",function(){             
            if(!sessionStorage.getItem('isReload')){
              let u = navigator.userAgent;
              let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
              if(isIOS){  
                setTimeout(() => {              
                  location.reload();
                },3000);
                sessionStorage.setItem('isReload',true);
              } 
            }
          });
          // myPlayer.on("playing",function(){
          //   isPlay.value = true;  
          //   sessionStorage.setItem('isReload',true);          
          // }); 
 
          // setTimeout(() => {
          //   if(!isPlay.value && !sessionStorage.getItem('isReload')){
          //     let u = navigator.userAgent;
          //     let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
          //     if(isIOS){                
          //       location.reload();                 
          //     }                                  
          //   }           
          // },5000);          
          myPlayer.on('error', () => {
            playVideoFn();
          });  
        },500);          
    });    
  };

  onMounted(() => {
    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }

    playVideoFn(); 
  });

  onUnmounted(() => {
    const myPlayer = videojs("myVideo");
    if(myPlayer){
      myPlayer.dispose();
    }    
    sessionStorage.removeItem('isReload');
  });
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    overflow: hidden;
    .header{
      display: flex;
      align-items: center;
      // justify-content: space-between;
      background-color: #fff;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
      .title {
        color: #262626;
        font-size: 18px;
        font-weight: 500;
        padding: 12px 0px 10px 20px;
        position: relative;
      }
    }
    .video{
      // height: 208px;
      margin: 16px 20px;
      box-shadow: inset 0px 0px 120px 0px rgba(45,120,237,0.25);
      border-radius: 8px 8px 8px 8px;
      // border: 1px solid #2D78ED;
    }
    .content{
      background-color: #fff;
      border-radius: 8px;
      margin: 0px 20px;
      padding-bottom: 10px;
      .title{
        color: #262626;
        font-size: 16px;
        font-weight: 500;
        position: relative;       
        padding: 16px 0px 16px 12px;
        padding-left: 20px;
        border-bottom: 1px dashed #D9D9D9;
        display: flex;
        align-items: center;        
      }
      .title::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 50%;
        left: 10px;
        height: 16px;
        width: 4px;
        transform: translateY(-50%);
      }
      .info{
        margin: 16px;
        .item{
          color: #555555;
          margin-bottom: 8px;
        }
      }
    }
    .source{
      color: #8C8C8C;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%,-50%);
      .name{
        margin-bottom: 5px;
        text-align: center;
      }
    }
  }
</style>